<template>
  <div class="vip-center">
    <!-- 页面头部 -->
    <div class="vip-header">
      <h1>VIP中心</h1>
      <p class="vip-subtitle">尊享特权，开启学习新篇章</p>
    </div>

    <!-- 主要内容区域 - 左右布局 -->
    <div class="vip-layout">
      <!-- 左侧导航栏 -->
      <div class="vip-sidebar">
        <a-menu :selected-keys="selectedKeys" @menu-item-click="handleMenuClick">
          <a-menu-item key="member-functions">
            <template #icon>
              <icon-apps />
            </template>
            会员功能
          </a-menu-item>
          <a-menu-item key="test">
            <template #icon>
              <icon-experiment />
            </template>
            测试
          </a-menu-item>
        </a-menu>
      </div>

      <!-- 右侧内容区 -->
      <div class="vip-content">
        <!-- 会员功能页面 -->
        <div v-if="currentPage === 'member-functions'" class="page-content">
          <h2>会员功能</h2>
          <div class="content-area">
            <p>A - 这里是会员功能页面内容</p>
            <p>这里将展示会员专属的各种功能和服务</p>
          </div>
        </div>

        <!-- 测试页面 -->
        <div v-else-if="currentPage === 'test'" class="page-content">
          <h2>测试页面</h2>
          <div class="content-area">
            <p>B - 这里是测试页面内容</p>
            <p>这里用于测试各种功能和组件</p>
          </div>
        </div>

        <!-- 默认页面 -->
        <div v-else class="page-content">
          <h2>欢迎来到VIP中心</h2>
          <div class="content-area">
            <p>请选择左侧菜单查看相应内容</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 页面数据
const loading = ref(false)
const currentPage = ref('member-functions') // 当前页面
const selectedKeys = ref(['member-functions']) // 选中的菜单项

// 处理菜单点击
const handleMenuClick = ({ key }) => {
  currentPage.value = key
  selectedKeys.value = [key]
}

// 页面加载时的初始化
onMounted(() => {
  // 可以在这里添加页面初始化逻辑
  console.log('VIP页面加载完成')
})
</script>

<style scoped lang="less">
.vip-center {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
  min-height: calc(100vh - 64px);
  background: var(--color-bg-1);
  
  .vip-header {
    margin-bottom: 40px;
    text-align: center;
    
    h1 {
      font-size: 48px;
      font-weight: 700;
      margin-bottom: 16px;
      background: linear-gradient(135deg, #ffd700 0%, #ffa500 50%, #ff8c00 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
    }
    
    .vip-subtitle {
      font-size: 18px;
      color: var(--color-text-2);
      margin: 0;
    }
  }
  
  .vip-layout {
    display: flex;
    gap: 50px;
    min-height: 900px;
    margin-left: -120px;
    margin-right: -120px;
  }
  
  .vip-sidebar {
    width: 260px;
    background: var(--color-bg-1);
    border-radius: 12px;
    border: 1px solid var(--color-border-2);
    padding: 24px 0;
    flex-shrink: 0;
    margin-left: 120px;
    
    :deep(.arco-menu) {
      border: none;
      background: transparent;
      
      .arco-menu-item {
          margin: 8px 16px;
          border-radius: 8px;
          transition: all 0.3s ease;
          height: 48px;
          line-height: 48px;
          font-size: 16px;
          cursor: pointer;
          
          &:hover {
            background-color: var(--color-fill-2);
          }
          
          &.arco-menu-selected {
            background: linear-gradient(135deg, #ffd700 0%, #ffa500 50%, #ff8c00 100%);
            color: white;
            
            .arco-menu-icon {
              color: white;
            }
          }
        }
    }
  }
  
  .vip-content {
    flex: 1;
    background: var(--color-bg-1);
    border-radius: 12px;
    border: 1px solid var(--color-border-2);
    padding: 50px;
    margin-right: 120px;
    min-height: 800px;
    width: calc(100% - 310px);
    
    .page-content {
      h2 {
        font-size: 36px;
        font-weight: 600;
        margin-bottom: 32px;
        color: var(--color-text-1);
        border-bottom: 3px solid var(--color-border-2);
        padding-bottom: 20px;
      }
      
      .content-area {
        p {
          font-size: 18px;
          color: var(--color-text-2);
          line-height: 1.8;
          margin-bottom: 16px;
          
          &:first-child {
            font-size: 22px;
            font-weight: 600;
            color: var(--color-text-1);
            margin-bottom: 24px;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .vip-center {
    padding: 16px;
    
    .vip-header {
      h1 {
        font-size: 36px;
      }
      
      .vip-subtitle {
        font-size: 16px;
      }
    }
    
    .vip-layout {
      flex-direction: column;
      gap: 16px;
    }
    
    .vip-sidebar {
      width: 100%;
      order: 2;
    }
    
    .vip-content {
      order: 1;
      padding: 20px;
      
      .page-content {
        h2 {
          font-size: 24px;
        }
        
        .content-area {
          p {
            font-size: 14px;
            
            &:first-child {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
</style>